<template>
  <div>
    <h1>1、动态组件的使用</h1>
    <div>
      <button @click="comName='userName'">账号密码填写</button>
      <button @click="comName='userInfo'">个人信息填写</button>
    </div>
    <p>下面显示注册的组件:</p>
    <!-- <userName>  </userName>
    <userInfo></userInfo> -->
    <!-- 
      动态组件的使用
      动态组件是一个vue内置组件component，他可以结合is属性动态切换显示的组件
     -->
    <component :is="comName"></component>
  </div>
</template>

<script>
import userName from "./components/userName.vue";
import userInfo from "./components/userInfo.vue";
export default {
  data(){
    return {
      comName: "userName"
    }
  },
  components: {
    userName,userInfo
  }
}
</script>

<style>

</style>